<template>
  <div>
    <vxe-grid v-bind="gridOptions" v-on="gridEvents">
      <template #toolbar_buttons>
        <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
        <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
        <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
      </template>

      <template #name_edit="{ row, column }">
        <vxe-input v-model="row.name" @change="nameChangeEvent({ column })" ></vxe-input>
      </template>
      <template #sex1="{ row }">
        <span>自定义插槽模板 {{ row.sex }}</span>
      </template>

    </vxe-grid>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    const nameChangeEvent = ({ column }) => {
      console.log(`${column.title} 触发 input 事件`)
    }
    //表尾合计逻辑
    const meanNum = (list, field) => {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count / list.length
    }
    const sumNum = (list, field) => {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count
    }
    return {
      gridOptions: {
        border: true,//表格border
        stripe: true,//分层高亮
        showFooter: true,//显示表尾
        height: 500,//表格高度
        align:null,//表格局的方位
        loading: false,//loading效果
        columnConfig: {
          resizable: true,//列宽可拖拽
        },
        tooltipConfig: {},
        exportConfig: {},
        menuConfig: {},
        toolbarConfig: {
          zoom: true,//全屏按钮
          // export: true,//下载按钮
          slots: {
            buttons: 'toolbar_buttons',//按钮配置
          }
        },
        editConfig: {
          trigger: 'click',
          // trigger: 'dblclick',双击
          mode: 'cell'
        },
        columns: [
          { type: 'checkbox', width: 50 },//复选框
          { type: 'seq',title: '序号', width: 50 },//序号
          { type: 'expand', width: 50 },//展开
          { field: 'name', title: 'Name', editRender: {}, slots: { edit: 'name_edit' } },
          //editRender 定义可编辑
          { field: 'sex', title: 'Sex', showHeaderOverflow: true,showOverflow: true, slots: { default: 'sex1' } },
          { field: 'address', title: 'Address', showOverflow: true, },
          { field: 'age', title: '年龄', showOverflow: true, sortable:true}
          //showOverflow 内容过长时显示省略号
          //showHeaderOverflow 表头过长显示省略号
          //sortable 排序

        ],
        data: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
        ],
        footerMethod({ columns, data }) {
          return [
            columns.map((column, columnIndex) => {
              if (columnIndex === 0) {
                  return '和值'
                }
                if (['age', 'rate'].includes(column.field)) {
                  return sumNum(data, column.field)
                }
                return ''
              }),
              columns.map((column, columnIndex) => {
                if (columnIndex === 0) {
                  return '平均'
                }
                if (['age', 'rate'].includes(column.field)) {
                  return meanNum(data, column.field)
                }
              return ''
            })
          ]
        }
      },
      gridEvents: {
        headerCellClick ({ column }) {
          console.log(`表头单元格点击${column.title}`)
        },
        headerCellDblclick ({ column }) {
          console.log(`表头单元格双击${column.title}`)
        },
        headerCellMenu ({ column }) {
          console.log(`表头右键单元格 ${column.title}`)
        },
        cellClick ({ column }) {
          console.log(`单元格点击${column.title}`)
        },
        cellDblclick ({ column }) {
          console.log(`单元格双击${column.title}`)
        },
        cellMenu ({ row }) {
          console.log(`单元格右键行 ${row.name}`)
        },
        footerCellClick ({ column }) {
          console.log(`表尾单元格点击${column.title}`)
        },
        footerCellDblclick ({ column }) {
          console.log(`表尾单元格双击${column.title}`)
        },
        footerCellMenu ({ column }) {
          console.log(`表尾右键单元格 ${column.title}`)
        },
        checkboxChange ({ checked }) {
          console.log(`复选框切换 ${checked}`)
        },
        checkboxAll ({ checked }) {
          console.log(`复选框全选切换 ${checked}`)
        },
        scroll ({ scrollTop, scrollLeft }) {
          console.log(`滚动事件scrollTop=${scrollTop} scrollLeft=${scrollLeft}`)
        },
        zoom ({ type }) {
          console.log(`表格全屏 type=${type}`)
        }
      },
      //前面定义后面 声明
      nameChangeEvent,
    }
  },
  mounted() {
    // this.gridOptions.loading = true
    setTimeout(() => {
      // 异步获取columns， data
    },3000)
  },
  methods: {
    
  }

}
</script>

<style lang="less" scoped></style>
